<template>
  <view class="page bg-white">
    <view class="main">
      <u-text color="#333" size="32rpx" text="请选择时间段" bold></u-text>
      <view class="flex gap">
        <view class="form-item flex-1" @click="showStartDate = true">
          <u-text :text="formData.startDate ? dayjs(formData.startDate).format('YYYY-MM-DD') : '请选择开始日期'" size="32rpx"
            :color="formData.startDate ? '#333' : '#999'"></u-text>
          <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
        </view>
        <view class="form-item flex-1" @click="showEndDate = true">
          <u-text :text="formData.endDate ? dayjs(formData.endDate).format('YYYY-MM-DD') : '请选择结束日期'" size="32rpx"
            :color="formData.endDate ? '#333' : '#999'"></u-text>
          <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
        </view>
      </view>

      <u-text color="#333" size="32rpx" text="已设置时间段" bold margin="60rpx 0 0 0"></u-text>
      <view class="flex align-baseline justify-center gap padding-lr margin-top" v-for="item in 4" :key="item">
        <view>
          <u-text :color="themePrimary" size="32rpx" :text="item"></u-text>
        </view>
        <view class="flex-1">时间段{{ item }}</view>
        <view class="flex gap">
          <u-icon name="edit-pen" size="46rpx" color="#999"></u-icon>
          <u-icon name="/static/icon/icon-trash.png" size="32rpx" color="#999"></u-icon>
        </view>
      </view>
      <up-datetime-picker :show="showStartDate" :closeOnClickOverlay="true" mode="date" placeholder="请选择开始日期"
        @close="showStartDate = false" @confirm="handleStartDateConfirm"
        @cancel="showStartDate = false"></up-datetime-picker>
      <up-datetime-picker :show="showEndDate" :closeOnClickOverlay="true" mode="date" placeholder="请选择结束日期"
        @close="showEndDate = false" @confirm="handleEndDateConfirm" @cancel="showEndDate = false"></up-datetime-picker>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
import dayjs from 'dayjs';

const { themePrimary, themeTertiary } = useTheme();

const formData = ref({
  startDate: '',
  endDate: '',
})

const showStartDate = ref(false)
const showEndDate = ref(false)

const handleStartDateConfirm = (e) => {
  console.log(e)
  showStartDate.value = false
  formData.value.startDate = e.value
}

const handleEndDateConfirm = (e) => {
  console.log(e)
  showEndDate.value = false
  formData.value.endDate = e.value
}
</script>

<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}
</style>
